<template>
  <div>
    <div @click="hiddenBackground" @touchmove.prevent
         style="z-index:98;position:fixed;bottom:0;left:0;width:3.75rem;background-color: #000000"
         :style="{transition:`all ${frametime}s`,opacity:opacity,height:fullscreenheight,visibility:backgroundDisplay}"></div>
    <div
      style="z-index:99;position:fixed;width:3.75rem;background-color: #f5f6f7;left:0"
      :style="{transition:`all ${frametime}s`,bottom:frameY +'rem'}">
      <div class="mw-row-style" style="width: 100%;margin:0.1rem 0">
        <div @click="shareToWxFriend" class="mw-column-center-style" style="width: 50%">
          <img src="/static/share_to_wxfriend.png" style="height:0.66rem;width: 0.66rem;margin-bottom: 0.09rem"/>
          <div class="mw-second-text-color" style="font-size: 0.14rem">微信好友</div>
        </div>
        <div @click="shareToWxTimeline" class="mw-column-center-style" style="width: 50%">
          <img src="/static/share_to_wxtimeline.png" style="height:0.66rem;width: 0.66rem;margin-bottom: 0.09rem"/>
          <div class="mw-second-text-color" style="font-size: 0.14rem">朋友圈</div>
        </div>
      </div>
      <div @click="hiddenBackground" class="mw-column-center-style mw-first-text-color mw-main-background-white"
           style="width: 100%;height:0.49rem;justify-content: center;font-size: 0.18rem;">取消
      </div>
    </div>

  </div>

</template>
<script>
  import utils from '../utils'
  import httputil from '../httputil'

  export default {
    props: ['title', 'desc', 'link', 'imgUrl'],
    data() {
      return {
        backgroundDisplay: "hidden",
        fullscreenheight: "0rem",
        opacity: 0,
        frameheight: 0,
        frameY: 0,
        frametime: 0,
      }
    },

    computed: {},
    created() {
    },
    watch: {},
    mounted() {
      var that = this
      this.fullscreenheight = this.GLOBAL.fullscreenheight
      this.frameheight = 4
      this.frameY = -this.frameheight
    },
    methods: {
      hiddenBackground() {
        this.frameY = -this.frameheight;
        this.frametime = 0.3;
        this.opacity = 0;
        this.backgroundDisplay = "hidden"
      },
      showBackground() {
        var that = this
        this.frameY = 0;
        this.frametime = 0.3;
        this.opacity = 0.5;
        this.backgroundDisplay = "visible"
      },
      shareToWxFriend() {
        var that = this
        alert("xxxx")
        wx.onMenuShareAppMessage({
          title: that.title, // 分享标题
          desc: that.desc, // 分享描述
          link: that.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: that.imgUrl, // 分享图标
          success: function () {
            // 用户点击了分享后执行的回调函数
          }
        });
        wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
          wx.updateAppMessageShareData({
            title: that.title, // 分享标题
            desc: that.desc, // 分享描述
            link: that.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: that.imgUrl, // 分享图标
            success: function () {
              that.hiddenBackground()
            }
          })
        });

      },
      shareToWxTimeline() {
        var that = this
        wx.onMenuShareTimeline({
          title: that.title, // 分享标题
          link: that.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: that.imgUrl, // 分享图标
          success: function () {
            // 用户点击了分享后执行的回调函数
          }
        });
        wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
          wx.updateTimelineShareData({
            title: that.title, // 分享标题
            link: that.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: that.imgUrl, // 分享图标
            success: function () {
              that.hiddenBackground()
            }
          })
        });

      },
    }
  }

</script>
<style scoped>

</style>
